<template>
	<view class="cate">
		<scroll-view scroll-x="true" class="top">
			<block v-for="(item,index) in selectList" :key="index">
				<view @click="select(index)" class="top-item" :class="item.isSelect?'top-action':''">
					<image mode="aspectFill" :src="item.img_url"></image>
					{{item.title}}
				</view>
			</block>
		</scroll-view>
		<div class="main empty" v-if="!smallGoods||smallGoods.length==0">该分类下暂无内容</div>
		<view class="flex main" v-else>
			<view class="left flex flex-direction">
				<block v-for="(items,indexs) in smallGoods" :key="index">
					<view @click="toGoodsList(items.id)" class="left-item" :class="items.id==smallId?'left-action':''">
						{{items.title}}
					</view>
				</block>
			</view>
			<scroll-view scroll-y="true" class="right h100" @scrolltolower="loadSearch">
				<block v-for="(item,index) in seachList" :key="index">
					<view class="item flex align-center" @tap='toGoodsDetail(item)'>
						<image :src="item.img_url" mode="aspectFit"></image>
						<view class="item-left flex flex-direction justify-center">
							<text>{{item.title}}</text>
							<view class="flex align-end">
								<text class="text-price"> {{item.price}} </text>
								<text>{{item.sales}}人已付款</text>
							</view>
						</view>
					</view>
				</block>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	var api = require('@/components/api.js');
	export default {
		data() {
			return {
				selectList: [{
					title: "衣物洗护",
					isSelect: true
				}],
				smallGoods: [],
				smallId: '',
				firstImg: '',
				firstTitle: '',
				page: 0,
				searchKey: '',
				seachList: []
			}
		},
		onLoad() {
			this.loadAllGoodsCategory()
		},
		methods: {
			/**
			 * 跳转到商品详情
			 */
			toGoodsDetail: function(item) {
				console.log(JSON.stringify(item));
				uni.navigateTo({
					url: "/module/good/goodsDetails/goodsDetails?id=" + item.goods_id
				});
			},
			// 加载右侧商品
			loadSearch: function() {
				this.page++
				api.get({
					url: 'Goods/GetGoodsList',
					data: {
						price_id: 0,
						brand_id: 0,
						category_id: this.smallId,
						sort: 1,
						seach: this.searchKey,
						page: this.page,
						pagesize: 15
					},
					success: data => {
						console.log(JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.seachList = this.seachList.concat(data.Response)

						} else if (data.ErrCode == 2) {
							if (this.page == 1) {
								this.seachList = []
							}
						}
					}
				});
			},
			// 加载一级分类
			loadAllGoodsCategory: function() {
				api.get({
					url: 'Goods/GetAllGoodsCategoryList',
					data: {},
					success: data => {
						console.info(data)
						if (data.ErrCode == 0) {
							this.selectList = data.Response
							this.select(0)
						}
					}

				});
			},
			// 加载二级分类
			loadSmallGoodsCategory: function(id) {
				api.get({
					url: 'Goods/GetSmallGoodsCategoryList',
					data: {
						id: id
					},
					success: data => {
						console.info('loadSmallGoodsCategory:' + JSON.stringify(data))
						if (data.ErrCode == 0) {
							this.smallGoods = data.Response
							this.smallId = data.Response[0].id
							this.page = 0
							this.seachList = []
							this.loadSearch()
						} else if (data.ErrCode == 2) {
							if (data.ErrMsg == '暂无内容') {
								this.smallGoods = []
							}
						}
					}
				});
			},
			toGoodsList: function(id) {
				this.smallId = id
				this.loadSearch()
			},
			// 切换一级分类
			select: function(ind) {
				this.selectList.forEach((item, index) => {
					if (index == ind) {
						item.isSelect = true
						this.loadSmallGoodsCategory(item.id)
					} else {
						item.isSelect = false
					}
				})
				this.selectList = [].concat(this.selectList)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.empty {
		text-align: center;
		color: #666;
		padding-top: 20vh;
	}

	.content {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx;
	}

	.recommend-bto>view {
		width: 36upx;
		height: 36upx;
		border-radius: 50%;
		background-color: #fde1e1;
	}

	.recommend-bto>view>text {
		color: #f03737;
		font-size: 20upx;
	}

	.recommend-bto>text {
		font-size: 30upx;
		color: #f03737;
	}

	.recommend-img1 {
		width: 330upx;
		height: 330upx;
	}

	.recommend-img2 {
		width: 160upx;
		height: 160upx;
	}

	.recommend-item>text {
		font-size: 22upx;
		color: #666666;
		margin-top: 6upx;
	}

	.recommend-item {
		margin-bottom: 24upx;
	}

	.recommend {
		margin-top: 20upx;
		background-color: #fff;
		padding: 0 30upx 0 30upx;
		box-sizing: border-box;
	}


	.shaixuan {
		position: fixed;
		top: 88upx;
		z-index: 999;
		height: 80upx;
		width: 100%;
		background-color: #fff;
	}

	.shaixuan>view>text {
		font-size: 28upx;
		color: #000000;
	}

	.shaixuan>view>image {
		width: 15upx;
		height: 18upx;
		margin-left: 15upx;
	}

	.item {
		background-color: #fff;
		height: 205upx;
		box-sizing: border-box;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #dddddd;
	}

	.item-left {
		margin-left: 20upx;

		height: 205upx;
		flex: 1;
	}

	.item-left>text {
		font-size: 28upx;
		color: #000000;
	}

	.item-left>view {
		margin-top: 40upx;
	}

	.item-left>view>text:nth-child(1) {
		font-size: 32upx;
		color: #ed0000;
		line-height: 1;
	}

	.item-left>view>text:nth-child(2) {
		font-size: 22upx;
		color: #999999;
		margin-left: 16upx;
	}

	.item image {
		width: 200upx;
		height: 200upx;
		border-radius: 15rpx;
	}






	.main {
		height: calc(100vh - 180rpx);
		overflow: hidden;
	}

	.top {
		height: 180rpx;
		border-bottom: 1rpx solid #dddddd;
		width: 100%;
		background-color: #fff;

		.top-action {
			color: #fc6520;

			image {
				border: 4rpx solid #fc6520;
			}
		}

		.top-item {
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			margin-left: 20rpx;
			font-size: 24rpx;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 50%;
				margin: 15rpx 0;
			}
		}
	}

	.cate {
		height: 100vh;
		overflow: hidden;
	}

	.list {
		padding: 40upx 0;
		background-color: #fff;
		margin-top: 20upx;
	}

	.items {
		display: flex;
		float: left;
	}

	.list-item image {
		width: 80upx;
	}

	.list-item {
		width: 30%;
		height: 125upx;
	}

	.list-item text {
		margin-top: 14upx;
		font-size: 21upx;
		color: #666666;
	}

	.title {
		font-size: 24upx;
		color: #333333;
		margin-top: 24upx;
	}

	.right>image {
		height: 265upx;
		width: 100%;
	}

	.right {
		padding: 20upx;
		box-sizing: border-box;
		width: 570upx;
	}

	.left {
		height: 100%;
		border-right: solid 1upx #dddddd;
		background-color: #efeff4;

		.left-item {
			width: 180upx;
			height: 90upx;
			font-size: 28upx;
			text-align: center;
			line-height: 90upx;
			color: #000000;
		}

		.left-action {
			background-color: #ffffff;
			border-radius: 0 0 20rpx 20rpx;
		}
	}
</style>